<template>
  <SubMenu>
    <template #title>
      <div :class="level">{{ data.title }}</div>
    </template>
    <template #default>
      <div v-for="child in data.children" :key="child.id">
        <MenuItem :level="child.level" v-if="!child.children">{{ child.title }}</MenuItem>
        <!-- ReSubMenu跟下面的属性name的值保持一致，相当于循环使用该组件 -->
        <ReSubMenu :level="child.level" v-else :data="child"></ReSubMenu>
      </div>
    </template>
  </SubMenu>
</template>
  
<script setup lang='ts' name="ReSubMenu">
import SubMenu from './SubMenu.vue';
import MenuItem from './MenuItem.vue';
defineProps({
  data: {
    type: Object,// 属性校验，为对象数据类型，并且如果没有赋值，默认给一个空对象
    default: () => ({})
  },
  level: {
    type: String,
    default: ''
  }
})
</script>
  
<style></style>